<template>
	<view class="container">
		<!-- 顶部用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar-container">
				<view class="user-avatar">
					<text class="avatar-icon">👤</text>
				</view>
				<view class="online-indicator"></view>
			</view>
			<view class="user-info">
				<text class="username">{{ currentUser.username || '用户' }}</text>
				<text class="user-status">在线</text>
				<text class="login-time">登录时间：{{ formatLoginTime(currentUser.loginTime) }}</text>
			</view>
		</view>

		<!-- 设置选项卡片 -->
		<view class="settings-card">
			<view class="card-header">
				<text class="card-title">数据管理</text>
				<text class="card-subtitle">管理您的账户数据</text>
			</view>
			
			<view class="settings-grid">
				<view class="setting-item" @click="exportData">
					<view class="setting-icon-container export">
						<text class="setting-icon">📤</text>
					</view>
									<text class="setting-title">导出数据</text>
				<text class="setting-desc">备份您的工程款记录</text>
				</view>
				
				<view class="setting-item" @click="importData">
					<view class="setting-icon-container import">
						<text class="setting-icon">📥</text>
					</view>
					<text class="setting-title">导入数据</text>
					<text class="setting-desc">恢复之前的备份</text>
				</view>
				
				<view class="setting-item" @click="clearData">
					<view class="setting-icon-container clear">
						<text class="setting-icon">🗑️</text>
					</view>
									<text class="setting-title">清空数据</text>
				<text class="setting-desc">删除所有工程款记录</text>
				</view>
				
				<view class="setting-item" @click="resetCategories">
					<view class="setting-icon-container reset">
						<text class="setting-icon">🔄</text>
					</view>
									<text class="setting-title">重置项目类型</text>
				<text class="setting-desc">恢复默认项目类型</text>
				</view>
			</view>
		</view>

		<!-- 账户设置卡片 -->
		<view class="settings-card">
			<view class="card-header">
				<text class="card-title">账户设置</text>
				<text class="card-subtitle">管理您的账户</text>
			</view>
			
			<view class="setting-list">
				<view class="setting-row" @click="logout">
					<view class="setting-left">
						<view class="setting-icon-container logout">
							<text class="setting-icon">🚪</text>
						</view>
						<view class="setting-text">
							<text class="setting-title">退出登录</text>
							<text class="setting-desc">安全退出当前账户</text>
						</view>
					</view>
					<view class="setting-right">
						<text class="arrow-icon">›</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 关于应用卡片 -->
		<view class="about-card">
			<view class="app-logo">
				<text class="logo-icon">💰</text>
			</view>
			<view class="app-info">
				<text class="app-name">工程款管理系统</text>
				<text class="app-version">v1.0.0</text>
				<text class="app-description">一个专业的工程款管理应用，帮助您更好地管理装修工程款。</text>
			</view>
			<view class="app-stats">
				<view class="stat-item">
					<text class="stat-number">1.0.0</text>
					<text class="stat-label">版本</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">2024</text>
					<text class="stat-label">年份</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentUser: {}
		}
	},
	onLoad() {
		// 检查登录状态
		if (!this.checkAuth()) return
		this.loadUserInfo()
	},
	methods: {
		loadUserInfo() {
			this.currentUser = uni.getStorageSync('currentUser') || {}
		},
		formatLoginTime(timeString) {
			if (!timeString) return '未知'
			const date = new Date(timeString)
			const month = date.getMonth() + 1
			const day = date.getDate()
			const hours = date.getHours().toString().padStart(2, '0')
			const minutes = date.getMinutes().toString().padStart(2, '0')
			return `${month}月${day}日 ${hours}:${minutes}`
		},
		logout() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('currentUser')
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 1500)
					}
				}
			})
		},
		checkAuth() {
			const currentUser = uni.getStorageSync('currentUser')
			if (!currentUser) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		},
		exportData() {
			const projects = uni.getStorageSync('engineering_projects') || []
			
			const exportData = {
				projects,
				exportTime: new Date().toISOString()
			}
			
			// 在实际应用中，这里可以调用文件系统API导出数据
			uni.showModal({
				title: '导出数据',
				content: '数据已准备就绪，共' + projects.length + '个工程',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '导出功能开发中',
							icon: 'none'
						})
					}
				}
			})
		},
		importData() {
			uni.showModal({
				title: '导入数据',
				content: '请选择要导入的数据文件',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '导入功能开发中',
							icon: 'none'
						})
					}
				}
			})
		},
		clearData() {
			uni.showModal({
				title: '确认清空',
				content: '此操作将清空所有工程款数据，无法恢复，确定继续吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('engineering_projects')
						uni.showToast({
							title: '数据已清空',
							icon: 'success'
						})
					}
				}
			})
		},
		resetCategories() {
			uni.showModal({
				title: '确认重置',
				content: '此操作将重置所有项目类型为默认设置，确定继续吗？',
				success: (res) => {
					if (res.confirm) {
						const defaultProjectTypes = [
							'天花板装修',
							'墙壁装修',
							'卫生间装修',
							'厨房装修',
							'地板装修',
							'门窗装修',
							'水电安装',
							'其他项目'
						]
						uni.setStorageSync('project_types', defaultProjectTypes)
						uni.showToast({
							title: '项目类型已重置',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding: 30rpx 20rpx;
}

/* 用户卡片样式 */
.user-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
}

.user-avatar-container {
	position: relative;
	margin-right: 30rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}

.avatar-icon {
	font-size: 60rpx;
	color: white;
}

.online-indicator {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	width: 24rpx;
	height: 24rpx;
	background: #4CAF50;
	border: 4rpx solid white;
	border-radius: 12rpx;
}

.user-info {
	flex: 1;
}

.username {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.user-status {
	font-size: 24rpx;
	color: #4CAF50;
	background: rgba(76, 175, 80, 0.1);
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	margin-bottom: 8rpx;
	display: inline-block;
}

.login-time {
	font-size: 24rpx;
	color: #999;
}

/* 设置卡片样式 */
.settings-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.card-header {
	margin-bottom: 30rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.card-subtitle {
	font-size: 24rpx;
	color: #999;
}

/* 网格布局设置项 */
.settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20rpx;
}

.setting-item {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	text-align: center;
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
}

.setting-item:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.9);
}

.setting-icon-container {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.setting-icon-container.export {
	background: linear-gradient(135deg, #667eea, #764ba2);
}

.setting-icon-container.import {
	background: linear-gradient(135deg, #f093fb, #f5576c);
}

.setting-icon-container.clear {
	background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.setting-icon-container.reset {
	background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.setting-icon-container.logout {
	background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

.setting-icon {
	font-size: 40rpx;
	color: white;
}

.setting-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.setting-desc {
	font-size: 22rpx;
	color: #999;
	line-height: 1.4;
}

/* 列表样式设置项 */
.setting-list {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	overflow: hidden;
}

.setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.setting-row:last-child {
	border-bottom: none;
}

.setting-row:active {
	background: rgba(0, 0, 0, 0.05);
}

.setting-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.setting-text {
	margin-left: 20rpx;
}

.setting-right {
	display: flex;
	align-items: center;
}

.arrow-icon {
	font-size: 32rpx;
	color: #ccc;
	font-weight: 300;
}

/* 关于应用卡片 */
.about-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	text-align: center;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.app-logo {
	margin-bottom: 30rpx;
}

.logo-icon {
	font-size: 80rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.app-name {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.app-version {
	font-size: 24rpx;
	color: #999;
	background: rgba(153, 153, 153, 0.1);
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	display: inline-block;
}

.app-description {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 30rpx;
}

.app-stats {
	display: flex;
	justify-content: center;
	gap: 40rpx;
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-size: 32rpx;
	font-weight: 600;
	color: #667eea;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 22rpx;
	color: #999;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.settings-grid {
		grid-template-columns: 1fr;
	}
	
	.container {
		padding: 20rpx 15rpx;
	}
	
	.user-card,
	.settings-card,
	.about-card {
		padding: 30rpx 20rpx;
	}
}
</style>
